<template>
  <div class="device-wrapper " style="padding: 20px 11px 8px 13px;">
    <ul class="ur-collapse">
<!--      集中器-->
      <li class="ur-collapse-item">
        <div class="collapse-item_header" @click="collapseFun(1)">
          <i class="iconfont icon-ecc"></i><label class="deviceCount">{{device.Ecc.Count}}</label><label class="float-right">集中器</label>
        </div>
        <el-collapse-transition>
          <div class="collapse-item_content w-100" v-show="activeNames.includes(1)">
            <ul class="d-flex justify-content-around align-items-baseline">
              <li>
                <label class="iconTxt"><i class="iconfont icontrue"></i><span>在线</span></label>
                <label>{{device.Ecc.OnLine}}</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont iconfalse"></i><span>离线</span></label>
                <label>{{device.Ecc.OffLine}}</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont icon-waring" ></i><span>告警</span></label>
              <!--  <label>{{device.Ecc.Alarm}}</label>-->
                <!--临时修改-->
                <label>0</label>
              </li>
            </ul>
          </div>
        </el-collapse-transition>

      </li>
<!--      控制器-->
      <li class="ur-collapse-item">
        <div class="collapse-item_header"  @click="collapseFun(2)">
          <i class="iconfont icon-controller"></i><label class="deviceCount">{{device.Pole.Count}}</label><label class="float-right">控制器</label>
        </div>
        <el-collapse-transition>
          <div class="collapse-item_content w-100" v-show="activeNames.includes(2)">
            <ul class="d-flex align-items-baseline justify-content-around flex-wrap">
              <li>
                <label class="iconTxt"><i class="iconfont icon-pole1"></i><span>单灯</span></label>
                <label>{{device.Pole.Bulb1Count}}</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont icon-pole mb-1"></i><span>双灯</span></label>
                <label>{{device.Pole.Bulb2Count}}</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont icon-on" ></i><span>开灯</span></label>
                <label>{{device.Pole.OnCount}}</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont icon-off" ></i><span>关灯</span></label>
<!--                <label v-if="regionIds[0]==146">177</label>-->
<!--                <label v-if="api.ajaxServe=='http://39.100.245.87:8887/'">177</label>-->
                <label>{{device.Pole.OffCount}}</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont iconfalse d-block"></i><span>离线</span></label>
                <!--<label>{{device.Pole.OffLine}}</label>-->
                <label>0</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont icon-waring d-block mr-0" ></i><span>告警</span></label>
                <label>{{device.Pole.Alarm}}</label>
              </li>
            </ul>
          </div>
        </el-collapse-transition>
      </li>
<!--      灯源数-->
      <li class="ur-collapse-item">
        <div class="collapse-item_header">
          <i class="iconfont icon-dengyuan"></i><label class="deviceCount">{{device.BulbCount}}</label><label class="float-right">灯源数</label>
        </div>
      </li>
<!--      传感器-->
      <li class="ur-collapse-item mb-0">
        <div class="collapse-item_header"  @click="collapseFun(3)">
          <i class="iconfont lamp-sensor"></i><label class="deviceCount">0</label><label class="float-right">传感器</label>
        </div>
        <el-collapse-transition>
          <div class="collapse-item_content w-100" v-show="activeNames.includes(3)">
            <ul class="d-flex align-items-baseline flex-wrap">
              <li>
                <label class="iconTxt"><i class="iconfont icon-camera"></i><span>摄像头</span></label>
                <label>0</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont icon-function mb-1"></i><span>多功能</span></label>
                <label>0</label>
              </li>
              <li>
                <label class="iconTxt"><i class="iconfont icon-microwave" ></i><span>微波</span></label>
                <label>0</label>
              </li>
              <li class="mb-0">
                <label class="iconTxt"><i class="iconfont icon-Illumination" ></i><span>光源</span></label>
                <label>0</label>
              </li>
            </ul>
          </div>
        </el-collapse-transition>
      </li>
    </ul>
  </div>
</template>

<script>
  import api from 'api/api'
  export default {
    components: {},
    props: {
      regionIds:{
        type:Array,
        default:[]
      }
    },
    data() {
      return {
        activeNames: [1,2,3],
        device:{Ecc:{},Pole:{}},
        api:api
      }
    },
    watch: {},
    computed: {},
    methods: {
      collapseFun(num){
        if(this.activeNames.includes(num)){
          let index=this.activeNames.indexOf(num)
          this.activeNames.splice(index,1)
        }else{
          this.activeNames.push(num)
        }
      },
      queryDeviceCount(){
        let param = this.regionIds.length ? {regionIds: this.regionIds} : {}
        api.fetchSimple('/ViewInfo/DevCountInfo',param)
            .then(r=>{
              this.device=r
            })
      }
    },
    created() {
      this.queryDeviceCount()
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .device-wrapper{
    .ur-collapse{color :#F0F0F0;
      .ur-collapse-item{margin-bottom :8px;}
      .collapse-item_header{height:60px;line-height:60px;background:#0C0F37;color :#F0F0F0;padding:0 30px;
        .iconfont{vertical-align :text-bottom;}
        label{
          cursor:pointer;
          &.deviceCount{font-size :34px;font-weight:bold;}
        }
      }
      .collapse-item_content{padding:0 30px;padding :12px 20px 10px;background: rgba(1, 1, 42, 0.6);
        li{width:90px;text-align:center;margin-bottom:15px;margin-right:22px;cursor:none}
        label:nth-child(1){
          margin-right:4px;
          span{font-size:12px;color:#6B82CB;}
          .iconfont{
            display :block;margin:0 auto;
          }
        }
        label:nth-child(2){
          font-size:22px;color:#8B92DC;width:40px;font-weight:bold
        }
      }
    }
    .icon-controller{width: 34px;height: 34px;background: url("~static/image/comm/icon-controller.png") no-repeat;}
    .icon-ecc{width: 34px;height: 34px;background: url("~static/image/comm/icon-ecc.png") no-repeat;}
    .icon-waring{width: 24px;height: 24px;background: url("~static/image/comm/icon-waring.png") no-repeat;}
    .icon-pole1{width: 19px;height: 24px;background: url("~static/image/comm/icon-pole1.png") no-repeat;}
    .icon-pole{width: 20px;height: 24px;background: url("~static/image/comm/icon-pole.png") no-repeat;}
    .icon-camera{width: 22px;height: 24px;background: url("~static/image/comm/icon-camera.png") no-repeat;}
    .icon-function{width: 22px;height: 24px;background: url("~static/image/comm/icon-function.png") no-repeat;}
    .icon-microwave{width: 26px;height: 24px;background: url("~static/image/comm/icon-microwave.png") no-repeat;}
    .icon-Illumination{width: 24px;height: 24px;background: url("~static/image/comm/icon-Illumination.png") no-repeat;}
    .icon-on{width: 23px;height: 24px;background: url("~static/image/comm/icon-on.png") no-repeat;}
    .icon-off{width: 21px;height: 24px;background: url("~static/image/comm/icon-off.png") no-repeat;}
    .icon-dengyuan{width: 34px;height: 34px;background: url("~static/image/comm/icon-dengyuan.png") no-repeat;}
    .lamp-sensor{width: 34px;height: 34px;background: url("~static/image/comm/lamp-sensor.png") no-repeat;}
    .icontrue{font-size: 20px;color: #81D862;text-shadow:0 0 6px rgba(129,246,255,0.5);margin:0;}
    .iconfalse{font-size: 20px;color: #E72424;text-shadow:0 0 6px rgba(238,6,3,0.5)}
  }
</style>
